<template>
	<view class="income" :style="{ height: webStyle.height }">
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
			<view class="title">我的收益</view>
			<view class="back"></view>
		</view>
		<view class="info">
			<view class="l">
				<view class="myImage">
					<image :src="userInfo.terHeaderImg || imgPath + 'index/my.png'" mode="widthFix" class="pic"></image>
				</view>
				<view class="userInfo">
					<view class="userName">{{ userInfo.terUsername }}</view>
					<view class="tag">
						<image :src="imgPath + 'index/vipIcon.png'" mode="widthFix" class="icon"></image>
						<view class="text">{{ userInfo.vipName || "普通用户" }}</view>
					</view>
				</view>
			</view>
			<view class="r">
				
				<!-- <image class="icon" :src="imgPath + 'my/more.svg'" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="mainBox">
			<view class="performance">
				<view class="performance-in">
					<view class="performance-title">成功邀请</view>
					<view class="performance-result">{{ userNum }}人</view>
					<view class="" style="color: #f75000; opacity: 0;">
						去提现
					</view>
				</view>
				<view class="performance-in">
					<view class="performance-title">累计奖励</view>
					<view class="performance-result">{{ earning }}元</view>
					<view class="" style="color: #f75000;">
						去提现
					</view>
				</view>
			</view>
			<view class="leaderboard">
				<view class="leaderboard-title-box">
					<view class="leaderboard-tab">
						<view :class="['tab-in', item.ac == tabAc.ac ? 'tab-in-ac' : '']" v-for="(item, index) in tabList" :key="item.ac" @tap="onChangeAc(item)">{{ item.name }}</view>
					</view>
				</view>
				<view class="leaderboard-list">
					<view class="leaderboard-item" :key="index" v-for="(item, index) in fn4(tabAc, list, userList)">
						<view class="item-left">
							<view class="userImg">
								<!-- <image v-if="index < 3" class="top3" src="https://636c-cloud1-0gh8lmb1111659af-1312043443.tcb.qcloud.la/invite/roundedRectangle1085.png"></image> -->
								<!-- 	<view class="leaderboard-num">{{ fn2(index + 1) }}</view> -->
								<image class="userAvatar" :src="item.avatar"></image>
							</view>
							<view class="item-content">
								<view class="userName">{{ item.userName }}</view>
								<view class="userPhone">{{ item.terAccount }}</view>
							</view>
						</view>
						<!-- <view class="item-right">￥ {{item.awardAmountDB}}</view> -->
						<view class="item-right">
							<block v-if="tabAc.ac == 1">
								<view class="item-right-top">类型：{{ item.remark }}</view>
								<view class="item-right-center">时间：{{ fn5(item.createTime) }}</view>
								<view class="item-right-bottom">奖励：{{ item.awardAmountDB }}元</view>
							</block>
							<block v-if="tabAc.ac == 2">
								<view class="item-right-top">类型：邀请注册</view>
								<view class="item-right-center">时间：{{ fn5(item.createTime) }}</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
	</view>
</template>

<script>
import { tools } from "@/utils/util.js";
import myRequest, * as request from "@/utils/api.js";
import * as api from "@/api/createVideo.js";
export default {
	name: "Income",
	data() {
		return {
			imgPath: tools.imgPath,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			LoginDialogShow: false,
			userInfo: {},
			pageInfo: {},
			earning: 100,
			userNum: 1,
			tabAc: { name: "奖励明细", ac: 1 },
			tabList: [
				{ name: "奖励明细", ac: 1 },
				{ name: "邀请明细", ac: 2 }
			],
			list: [
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				}
			],
			userList: [
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				},
				{
					createTime: "2025-06-15 11:09:48",
					terAccount: "19924343977",
					avatar: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-01-18/1d0f0f14-6cd512.webp",
					userName: "彭宇君",
					remark: "邀请注册",
					awardAmountDB: "100"
				}
			]
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 4.5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 获取页面参数
		initPageInfo(opt) {
			let pageInfo = uni.getStorageSync("AIContInfo");
			this.pageInfo = pageInfo;
			uni.removeStorageSync("AIContInfo");
		},
		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {
			this.getData();
		},
		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		},
		// 获取数据
		getData() {},
		// 切换tabAc
		onChangeAc(item) {
			this.tabAc = item;
		}
	},
	computed: {
		// 秒数转时间
		seconds2time() {
			return (index_num) => {
				// tools.seconds2time;

				// let getHours = (parseInt(index_num / 60 / 60) % 12).toString().padStart(2, 0);
				// let getMinutes = (parseInt(index_num / 60)% 60).toString().padStart(2, 0);
				let getMinutes = parseInt(index_num / 60)
					.toString()
					.padStart(2, 0);
				let getSeconds = (index_num % 60).toFixed(2);
				if (getSeconds < 10) getSeconds = "0" + getSeconds;
				// let str = `${getHours}.${getMinutes}.${getSeconds}`;
				let str = `${getMinutes}:${getSeconds}`;
				return str;
			};
		},
		fn() {
			return (list) => {
				var temp = JSON.parse(JSON.stringify(list));
				return temp
					.concat(temp)
					.concat(temp)
					.concat(temp)
					.sort(function (a, b) {
						return b.awardAmount - a.awardAmount;
					});
			};
		},
		fn2() {
			return (num) => {
				num = parseInt(num);
				if (!num) return 0;
				return num < 10 ? "0" + num : num;
			};
		},
		fn4() {
			return (tabAc, list, userList) => {
				const listArr = [list, userList];
				return listArr[tabAc.ac - 1];
			};
		},
		fn5() {
			return (str) => str.slice(0, -3);
		}
	},
	onLoad(opt) {
		this.initSystemInfo();
		this.initPageInfo(opt);
		this.initUserInfo();
		this.getData();
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.income {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(0deg, rgba(233, 251, 253, 0.66) 0%, rgba(233, 251, 253, 1) 52%, rgba(100, 250, 205, 0.52) 86%, rgba(102, 232, 255, 0.68) 100%);
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: auto;

	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		filter: invert(1);
		.back {
			width: 6vw;
		}

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}

	.info {
		width: 100%;
		height: 36vw;
		box-sizing: border-box;
		padding: 0vw 3vw 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 3vw;
		.l {
			display: flex;
			.myImage {
				overflow: hidden;
				width: 16vw;
				height: 16vw;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2px solid #00997f;
				margin-bottom: 3vw;
				margin-right: 3vw;
				background: rgba(79, 93, 67, 0.3);

				.pic {
					width: 100%;
					height: 100%;
				}
			}
			.userInfo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.userName {
					font-size: 40rpx;
					font-weight: 600;
					color: rgba(51, 51, 51, 1);
					margin-right: 2vw;
					margin-bottom: 2vw;
				}

				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 1vw 2vw;
					border-radius: 100vw;
					background: rgba(229, 229, 229, 0.5);

					.icon {
						width: 3vw;
						height: 3vw;
						display: block;
						margin-right: 1vw;
					}

					.text {
						font-size: 24rpx;
						color: rgba(242, 169, 34, 1);
					}
				}
			}
		}
		.r {
			padding-right: 2vw;
			.icon {
				width: 2vw;
			}
		}
	}

	.mainBox {
		background: #edf2ef;
		flex: 1;
		display: flex;
		flex-direction: column;

		.performance {
			font-family: Source Han Sans CN;
			margin: -60rpx auto 32rpx;
			width: 686rpx;
			height: 280rpx;
			background: #f9f5ff;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.performance .performance-in {
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		.performance .performance-title {
			font-size: 30rpx;
			font-weight: 400;
			color: #1a053c;
		}

		.performance .performance-result {
			margin-top: 36rpx;
			font-size: 48rpx;
			font-weight: 400;
			color: #333333;
		}
		.leaderboard {
			width: 686rpx;
			min-height: 516rpx;
			max-height: 46vh;
			background: #ffffff;
			border-radius: 16px;
			margin: 32rpx auto 0rpx;
			box-sizing: border-box;
			padding: 0rpx 28rpx 46rpx;
			display: flex;
			flex-direction: column;
		}

		.leaderboard .leaderboard-title-box {
			width: 100%;
			height: 168rpx;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}

		.leaderboard-title-box .leaderboard-tab {
			display: flex;
			height: 100%;
		}

		.leaderboard-tab .tab-in {
			/* transform: translateY(); */
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: normal;
		}

		.leaderboard-tab .tab-in-ac {
			font-weight: 700;
			color: #f75000;
		}

		.leaderboard-title-box .leaderboard-title {
			transform: translateY(60rpx);
		}

		.leaderboard-title-box .leaderboard-title-img {
			position: absolute;
			top: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 405rpx;
			height: 24rpx;
		}

		.leaderboard .leaderboard-list {
			flex: 1;
			overflow: auto;
		}

		.leaderboard-list .leaderboard-item {
			display: flex;
			width: 100%;
			/* height: 88rpx; */
			justify-content: space-between;
			align-items: center;
			margin-bottom: 81rpx;
		}

		.leaderboard-list .leaderboard-item:last-child {
			margin-bottom: 0rpx;
		}

		.leaderboard-list .leaderboard-item:nth-child(-n + 3) .leaderboard-num {
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
		}

		.leaderboard-list .item-left {
			display: flex;
		}

		.leaderboard-item .userImg {
			position: relative;
			/* width: 166rpx; */
			height: 88rpx;
			margin-right: 24rpx;
		}

		.userImg .top3 {
			position: absolute;
			width: 120rpx;
			height: 88rpx;
			top: 0;
			left: 0;
		}

		.userImg .leaderboard-num {
			position: absolute;
			top: 30rpx;
			left: 16rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #fa5765;
		}

		.userImg .userAvatar {
			/* position: absolute; */
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			right: 0;
			top: 0;
		}

		.leaderboard-item .item-content {
			height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.item-content .userName {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			/* margin-bottom: 29rpx; */
		}

		.item-content .userPhone {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		/* .item-right{
		  font-size: 32rpx;
		  font-weight: bold;
		  color: #FA5765;
		} */

		.item-right {
			max-width: 287rpx;
			height: 120rpx;
			font-family: PingFang SC;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.item-right .item-right-top {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.item-right .item-right-center {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.item-right .item-right-bottom {
			font-size: 28rpx;
			font-weight: bold;
			color: #fa5765;
		}
	}
}
</style>
